

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=&#34;auto&#34;>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/blog/img/favicon.png">
  <link rel="icon" href="/blog/img/favicon.jpg">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="description" content="">
  <meta name="author" content="John Doe">
  <meta name="keywords" content="">
  
  <title>JQuery笔记 - ITaylorfan的小站</title>

  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css" />
  <link  rel="stylesheet" href="/blog/lib/hint/hint.min.css" />

  
    
    
      
      <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10.7.2/styles/github-gist.min.css" />
    
  

  
    <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
  



<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_kmeydafke9r.css">


<link  rel="stylesheet" href="/blog/css/main.css" />

<!-- 自定义样式保持在最底部 -->


  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"itaylorfan.gitee.io","root":"/blog/","version":"1.8.11","typing":{"enable":true,"typeSpeed":70,"cursorChar":"❤","loop":false},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"right","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"copy_btn":true,"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":false,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null}},"search_path":"/local-search.xml"};
  </script>
  <script  src="/blog/js/utils.js" ></script>
  <script  src="/blog/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 5.4.0"></head>


<body>
  <header style="height: 85vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/blog/">&nbsp;<strong>ITaylorfan</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" data-toggle="modal" data-target="#modalSearch">&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;</a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner" id="banner" parallax=true
         style="background: url('/blog/img/TS8-10-9.jpg') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="page-header text-center fade-in-up">
            <span class="h2" id="subtitle" title="JQuery笔记">
              
            </span>

            
              <div class="mt-3">
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2021-10-06 19:38" pubdate>
        2021年10月6日 晚上
      </time>
    </span>
  
</div>

<div class="mt-1">
  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      8.4k 字
    </span>
  

  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      115
       分钟
    </span>
  

  
  
</div>

            
          </div>

          
            <div class="scroll-down-bar">
              <i class="iconfont icon-arrowdown"></i>
            </div>
          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">JQuery笔记</h1>
            
            <div class="markdown-body">
              <h1 id="前端基础-JQuery"><a href="#前端基础-JQuery" class="headerlink" title="前端基础-JQuery"></a>前端基础-JQuery</h1><p>jQuery是一个快速、简洁的<a target="_blank" rel="noopener" href="https://baike.baidu.com/item/JavaScript/321142">JavaScript</a>框架，是继<a target="_blank" rel="noopener" href="https://baike.baidu.com/item/Prototype/14335188">Prototype</a>之后又一个优秀的JavaScript代码库（框架）于2006年1月由[John Resig](<a target="_blank" rel="noopener" href="https://baike.baidu.com/item/John">https://baike.baidu.com/item/John</a> Resig/6336344)发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript<a target="_blank" rel="noopener" href="https://baike.baidu.com/item/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1212549">设计模式</a>，优化<a target="_blank" rel="noopener" href="https://baike.baidu.com/item/HTML/97049">HTML</a>文档操作、事件处理、动画设计和<a target="_blank" rel="noopener" href="https://baike.baidu.com/item/Ajax/8425">Ajax</a>交互。</p>
<p>jQuery主要做了这几个事情</p>
<ol>
<li>优化了DOM的操作</li>
<li>针对事件进行便捷处理</li>
<li>动画设计(过渡的动画设计)</li>
<li>Ajax数据交互</li>
</ol>
<blockquote>
<p>jQuery具备两个特殊的优点</p>
<ol>
<li>具有独特的链式语法和短小清晰的多功能接口</li>
<li>具有高效灵活的<a target="_blank" rel="noopener" href="https://baike.baidu.com/item/CSS%E9%80%89%E6%8B%A9%E5%99%A8/2819686">CSS选择器</a>，并且可对<a target="_blank" rel="noopener" href="https://baike.baidu.com/item/CSS/5457">CSS</a>选择器进行扩展</li>
</ol>
<p>jQeury还有一个扩展点</p>
<ol>
<li>拥有便捷的插件扩展机制和丰富的插件</li>
</ol>
<p>jQeury的使用场景</p>
<ol>
<li>jQuery兼容各种主流浏览器，如<a target="_blank" rel="noopener" href="https://baike.baidu.com/item/IE/69103">IE</a> 6.0+、FF 1.5+、<a target="_blank" rel="noopener" href="https://baike.baidu.com/item/Safari/597">Safari</a> 2.0+、Opera 9.0+等。</li>
</ol>
</blockquote>
<h2 id="1-jQuery的安装与导入"><a href="#1-jQuery的安装与导入" class="headerlink" title="1. jQuery的安装与导入"></a>1. jQuery的安装与导入</h2><p>jQuery的安装方式的非常简单，只需要导入一个JS文件即可，我们可以在线导入，也可以下载到本地去导入</p>
<p>官网jquery压缩版引用地址:</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://code.jquery.com/jquery-3.5.1.min.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>本地导入</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/jquery-3.5.1.min.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>目前jQuery发布的最新版本是3.6.0，这个新版本是不兼容低版本的IE的，如果在以后的工作当中要兼容IE6等低版本浏览器，建议你的jQuery版本不要超过1.8.</p>
<p>jQuery的版本<strong>并不是越新越好</strong>，要根据自己的需求来选择版本</p>
</blockquote>
<h2 id="2-jQuery的语法结构"><a href="#2-jQuery的语法结构" class="headerlink" title="2. jQuery的语法结构"></a>2. jQuery的语法结构</h2><p>jQuery语法组成主要包含三个部分</p>
<ol>
<li>起始标志符<code>$</code></li>
<li>选择器</li>
<li>方法</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//语法格式</span><br>$(选择器).方法();<br><br>$(<span class="hljs-string">&quot;#btn1&quot;</span>).html();<br>$(<span class="hljs-string">&quot;.div1&quot;</span>).click();<br></code></pre></td></tr></table></figure>

<h2 id="3-jQuery的选择器"><a href="#3-jQuery的选择器" class="headerlink" title="3. jQuery的选择器"></a>3. jQuery的选择器</h2><p>通过jQuery的<code>$</code>符号以及选择器我们可以快速的选择页面上面的元素， 这个些选择器就是我们之前所学习的CSS当中的选择器，同时jQuery对这些选择器又做一些扩展</p>
<p><strong>第一类：普通的CSS选择器</strong></p>
<p><img src="https://pic.imgdb.cn/item/61519fc32ab3f51d918e4e64.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210927091117374"></p>
<p><strong>第二类：jQuery所扩展的选择器</strong></p>
<p><img src="https://pic.imgdb.cn/item/6151a0e12ab3f51d918f57a3.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210927091129820"></p>
<p><strong>第三类：属性选择器及扩展以后的属性选择器</strong></p>
<p><img src="https://pic.imgdb.cn/item/6151a1502ab3f51d918fcd50.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210927091144062"></p>
<p><strong>第四类：与表单元素相关的选择器</strong></p>
<p><img src="https://pic.imgdb.cn/item/6151a1d82ab3f51d91905ad6.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210927091152753"></p>
<p>上面的jQuery的选择器非常丰富给我们选择元素进行了极大的使得，但是它仍然不违背之前选择器的元素，“不能选父级元素及哥哥元素”</p>
<h2 id="4-jQuery的链式语法"><a href="#4-jQuery的链式语法" class="headerlink" title="4. jQuery的链式语法"></a>4. jQuery的链式语法</h2><p>jQuery的核心是写得更少，做得更多。这一点的体现非常重要，它主要实现的技术就是链式语法</p>
<p><strong>链式语法</strong>：在一次的选择当中进行多次设置操作</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(选择器).方法<span class="hljs-number">1</span>().方法<span class="hljs-number">2</span>().方法<span class="hljs-number">3</span>();<br></code></pre></td></tr></table></figure>

<p>上面就是链式语法最基本的写法，我们可以在这个上面进行相当的测试</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn1&quot;</span>&gt;</span>按钮1<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/jquery-3.5.1.min.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-comment">// 对当前按钮设置一个事件，鼠标按下，里面内容变成我按下，鼠标松开，内容变为我松开</span></span><br><span class="javascript">    $(<span class="hljs-string">&quot;#btn1&quot;</span>).on(<span class="hljs-string">&quot;mousedown&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;</span><br><span class="javascript">        $(<span class="hljs-built_in">this</span>).text(<span class="hljs-string">&quot;我按下了&quot;</span>);</span><br><span class="javascript">    &#125;);</span><br><span class="javascript"></span><br><span class="javascript">    $(<span class="hljs-string">&quot;#btn1&quot;</span>).on(<span class="hljs-string">&quot;mouseup&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;</span><br><span class="javascript">        $(<span class="hljs-built_in">this</span>).text(<span class="hljs-string">&quot;我松开了&quot;</span>);</span><br><span class="javascript">    &#125;);</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>在上面的代码当中我们可以看到两次事件的绑定在同一个对象上面。所以这个时候我们可以把上面的代码写成一个链式语法</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(<span class="hljs-string">&quot;#btn1&quot;</span>).on(<span class="hljs-string">&quot;mousedown&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;<br>    $(<span class="hljs-built_in">this</span>).text(<span class="hljs-string">&quot;我按下了&quot;</span>);<br>&#125;).on(<span class="hljs-string">&quot;mouseup&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;<br>    $(<span class="hljs-built_in">this</span>).text(<span class="hljs-string">&quot;我松开了&quot;</span>);<br>&#125;);<br></code></pre></td></tr></table></figure>



<h2 id="5-jQuery的方法"><a href="#5-jQuery的方法" class="headerlink" title="5. jQuery的方法"></a>5. jQuery的方法</h2><p>jQuery是一个优先的JS库，它主要是一个系列方法的集合，它里面所有的东西都是方法，它只有一个属性<code>length</code></p>
<h3 id="DOM操作方法"><a href="#DOM操作方法" class="headerlink" title="DOM操作方法"></a>DOM操作方法</h3><p>之前已经提到过一点，jQuery的选择器是有缺陷的，它不能选择前面的元素和父级的元素，所以它提供了类似于DOM操作当中的DOM选取方法</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn1&quot;</span>&gt;</span>按钮1<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;ul1&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第1项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;ccc&quot;</span>&gt;</span>第2项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第3项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第4项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;aaa&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>第5项<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;a1&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>百度一下<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>这是段落<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第6项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第7项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第8项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;bbb&quot;</span>&gt;</span>第9项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第10项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br></code></pre></td></tr></table></figure>

<ol>
<li><p><strong>向子级元素选取children(selector)</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(<span class="hljs-string">&quot;.ul1&gt;li&quot;</span>);				<span class="hljs-comment">//获取所有的li</span><br>$(<span class="hljs-string">&quot;.ul1&quot;</span>).children();		<span class="hljs-comment">//与上面相同</span><br><br>$(<span class="hljs-string">&quot;.ul1&gt;.aaa&quot;</span>);				<span class="hljs-comment">//选择器操作</span><br>$(<span class="hljs-string">&quot;.ul1&quot;</span>).children(<span class="hljs-string">&quot;.aaa&quot;</span>)	<span class="hljs-comment">//children里面还可以再次添加选择器进行二次选择</span><br></code></pre></td></tr></table></figure>
</li>
<li><p><strong>向后代元素选取find(selector)</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(<span class="hljs-string">&quot;.ul1 a&quot;</span>);<br>$(<span class="hljs-string">&quot;.ul1&quot;</span>).find(<span class="hljs-string">&quot;a&quot;</span>);		<span class="hljs-comment">//找ul1的后代a标签</span><br></code></pre></td></tr></table></figure>
</li>
<li><p><strong>各父级元素选取</strong></p>
<ul>
<li><code>parent(selector)</code></li>
<li><code>parents(selector)</code></li>
<li><code>parentsUntil(selector)</code></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//选择器不能选父级</span><br>$(<span class="hljs-string">&quot;#a1&quot;</span>).parent();		  <span class="hljs-comment">//父级元素</span><br>$(<span class="hljs-string">&quot;#a1&quot;</span>).parents();		  <span class="hljs-comment">//找到所有的父级，直到html元素</span><br>$(<span class="hljs-string">&quot;#a1&quot;</span>).parentsUntil(<span class="hljs-string">&quot;body&quot;</span>);	 <span class="hljs-comment">//找父经元素，直到某一个点停下，但不包含这个点</span><br></code></pre></td></tr></table></figure>
</li>
<li><p><strong>向后面元素选取</strong></p>
<ul>
<li><code>next(selector)</code></li>
<li><code>nextAll(selector)</code></li>
<li><code>nextUntil(selector)</code></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(<span class="hljs-string">&quot;.aaa&quot;</span>).next();				<span class="hljs-comment">//下一个元素</span><br>$(<span class="hljs-string">&quot;.aaa&quot;</span>).nextAll();			<span class="hljs-comment">//后面的所有元素</span><br>$(<span class="hljs-string">&quot;.aaa&quot;</span>).nextAll(<span class="hljs-string">&quot;.bbb&quot;</span>);		<span class="hljs-comment">//后面所有的.bbb</span><br>$(<span class="hljs-string">&quot;.aaa&quot;</span>).nextUntil(<span class="hljs-string">&quot;.bbb&quot;</span>);	<span class="hljs-comment">//后面的子元素到.bbb结束 ，不包含.bbb</span><br></code></pre></td></tr></table></figure>
</li>
<li><p><strong>向前面元素选取</strong></p>
<ul>
<li><code>prev(selector)</code></li>
<li><code>prevAll(selector)</code></li>
<li><code>prevUntil(selector)</code></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(<span class="hljs-string">&quot;.aaa&quot;</span>).prev();			<span class="hljs-comment">//前面的元素</span><br>$(<span class="hljs-string">&quot;.aaa&quot;</span>).prevAll();		<span class="hljs-comment">//前面所有的</span><br>$(<span class="hljs-string">&quot;.aaa&quot;</span>).prevAll(<span class="hljs-string">&quot;.ccc&quot;</span>);	<span class="hljs-comment">//前面所有.ccc的元素</span><br>$(<span class="hljs-string">&quot;.aaa&quot;</span>).prevUntil(<span class="hljs-string">&quot;ccc&quot;</span>);	<span class="hljs-comment">//前的所有元素到.ccc结束 ，不包含.ccc</span><br></code></pre></td></tr></table></figure>
</li>
<li><p><strong>兄弟元素选取</strong></p>
<ul>
<li><code>siblings(selector)</code></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(<span class="hljs-string">&quot;.aaa&quot;</span>).siblings();<br>$(<span class="hljs-string">&quot;.aaa&quot;</span>).siblings(<span class="hljs-string">&quot;.bbb,.ccc&quot;</span>);<br></code></pre></td></tr></table></figure>
</li>
<li><p><strong>过滤选取filter(selector)</strong></p>
<p>这个方法可以在经选择元素里面再次进行过滤</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(<span class="hljs-string">&quot;.ul1&gt;li&quot;</span>);		<span class="hljs-comment">//这个时候它是选择了所有的li，我们希望在这人已经选择的元素里面去过滤符合要求的</span><br>$(<span class="hljs-string">&quot;.ul1&gt;li&quot;</span>).filter(<span class="hljs-string">&quot;.aaa&quot;</span>);<br></code></pre></td></tr></table></figure>
</li>
<li><p><strong>排除选取not(selector)</strong></p>
<p>这个方法可以在已经选择的元素里面排除不符合要求的元素</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(<span class="hljs-string">&quot;.ul1&gt;li&quot;</span>);	<span class="hljs-comment">//选中了所有的li,现在希望不要有.aaa的元素</span><br>$(<span class="hljs-string">&quot;.ul1&gt;li&quot;</span>).not(<span class="hljs-string">&quot;.aaa&quot;</span>)；		<br><br><span class="hljs-comment">//当前可以一次性多次排除</span><br>$(<span class="hljs-string">&quot;.ul1&gt;li&quot;</span>).not(<span class="hljs-string">&quot;.aaa,.bbb,.ccc&quot;</span>)<br></code></pre></td></tr></table></figure>
</li>
<li><p><strong>指定索引选取</strong></p>
<p>这个方法可以在已经选择的元素里面找到指定的</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(<span class="hljs-string">&quot;.ul1&gt;li&quot;</span>)；			<span class="hljs-comment">//这是所有的li</span><br>$(<span class="hljs-string">&quot;.ul1&gt;li&quot;</span>).first();		<span class="hljs-comment">//第一个</span><br>$(<span class="hljs-string">&quot;.ul1&gt;li&quot;</span>).last();		<span class="hljs-comment">//最后一个</span><br>$(<span class="hljs-string">&quot;.ul1&gt;li&quot;</span>).eq(<span class="hljs-number">6</span>)；			<span class="hljs-comment">//获取索引为6的这一项</span><br></code></pre></td></tr></table></figure>
</li>
<li><p><strong>获取当前元素的索引</strong></p>
<p>该方法比较重要，它可以通过当前方法来获取当前元素在父级里面是第几个子元素</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(<span class="hljs-string">&quot;.aaa&quot;</span>).index();		<span class="hljs-comment">//当前元素.aaa是第几个子元素</span><br>$(<span class="hljs-string">&quot;.ccc&quot;</span>).index();<br></code></pre></td></tr></table></figure>

</li>
</ol>
<p><img src="https://pic.imgdb.cn/item/6151a3f42ab3f51d919264b6.png" srcset="/blog/img/loading.gif" lazyload alt="jQueryDOM操作方法对象"></p>
<h3 id="事件方法"><a href="#事件方法" class="headerlink" title="事件方法"></a>事件方法</h3><p>DOM的操作里面，事件是做为一个得要的点存在的，所以jQuery的框架对事件的处理有了个一个封装过程，它对我们的<strong>常用事件进行了封装</strong> ，将这些事件封装成了一些方法</p>
<p><img src="https://pic.imgdb.cn/item/6151a4db2ab3f51d91935bab.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210927103007252"></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;btn1&quot;</span>&gt;</span>按钮1<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/jquery-3.5.1.min.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-comment">/*</span></span><br><span class="hljs-comment"><span class="javascript">    var btn1 = document.querySelector(&quot;.btn1&quot;);</span></span><br><span class="hljs-comment"><span class="javascript">    btn1.addEventListener(&quot;click&quot;,function(event)&#123;</span></span><br><span class="hljs-comment"><span class="javascript">        console.log(&quot;我是按钮1&quot;)</span></span><br><span class="hljs-comment"><span class="javascript">    &#125;);</span></span><br><span class="hljs-comment"><span class="javascript">    */</span></span><br><span class="javascript"></span><br><span class="javascript">    $(<span class="hljs-string">&quot;.btn1&quot;</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;</span><br><span class="javascript">        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;我是jQuery绑定的事件&quot;</span>)</span><br><span class="javascript">    &#125;);</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>在上面的代码里面，我们可以看到click这个方法就是对选定的元素进行<code>onclick</code>的事件绑定。使用事件方法绑定的时候，它是进行批量绑定的</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;btn1&quot;</span>&gt;</span>按钮1<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;btn1&quot;</span>&gt;</span>按钮2<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;btn1&quot;</span>&gt;</span>按钮3<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;btn1&quot;</span>&gt;</span>按钮4<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;btn1&quot;</span>&gt;</span>按钮5<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;btn1&quot;</span>&gt;</span>按钮6<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;btn1&quot;</span>&gt;</span>按钮7<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/jquery-3.5.1.min.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    $(<span class="hljs-string">&quot;.btn1&quot;</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;</span><br><span class="javascript">        <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">this</span>);</span><br><span class="javascript">    &#125;);</span><br><span class="javascript">    </span><br><span class="javascript">    $(<span class="hljs-string">&quot;.btn1&quot;</span>).mouseover(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)</span>&#123;</span><br><span class="javascript">       	<span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;大爷你来了&quot;</span>); </span><br><span class="javascript">    &#125;);</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>注意</strong>：jQuery只是对常用的事件进行了封装，但是对于一些其它的事件它就没有事件方法封装 ，怎么办呢？</p>
<p>这个时候<code>jQeury</code>单独对所有的事件都提供了一个方法叫<code>on</code>方法</p>
<h3 id="jQuery的on事件绑定"><a href="#jQuery的on事件绑定" class="headerlink" title="jQuery的on事件绑定"></a>jQuery的on事件绑定</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(<span class="hljs-string">&quot;.btn1&quot;</span>).on(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">this</span>);<br>&#125;)<br><br>$(<span class="hljs-string">&quot;.btn1&quot;</span>).on(<span class="hljs-string">&quot;mouseover&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;大爷，你来了&quot;</span>);<br>&#125;)<br></code></pre></td></tr></table></figure>

<blockquote>
<p>代码说明：上面的代码就使用了<code>on</code>的方法来进行事件绑定，它把事件的名称变成了一个参数，这样任何事件都可以进行绑定。</p>
</blockquote>
<h3 id="jQuery的on事件事件委托"><a href="#jQuery的on事件事件委托" class="headerlink" title="jQuery的on事件事件委托"></a>jQuery的on事件事件委托</h3><p>jQuery的on除了进行事件绑定以外，还可以进行事件委托</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;ul1&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第一项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;aaa&quot;</span>&gt;</span>第二项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第三项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;aaa&quot;</span>&gt;</span>第四项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第五项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>我们现在需要对<code>class=&quot;aaa&quot;</code>的元素进行事件绑定</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(<span class="hljs-string">&quot;.ul1&gt;.aaa&quot;</span>).on(<span class="hljs-string">&quot;click&quot;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)</span>&#123;<br>    <span class="hljs-comment">//这只是普通的事件绑定</span><br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">this</span>);<br>&#125;);<br></code></pre></td></tr></table></figure>

<p>这么做后期新加的元素可能就没有事件了，所以在有些场景下面我们需要使用到事件委托的方式来进行</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(<span class="hljs-string">&quot;.ul1&quot;</span>).on(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-string">&quot;.aaa&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">this</span>);<br>&#125;);<br></code></pre></td></tr></table></figure>

<blockquote>
<p>在上面的代码当中，我们可以看到我们的事件是绑定在了<code>.ul1</code> 上面，但是我们通过<code>on</code>方法进行了事件委托，判断了一事件的触发者是<code>.aaa</code></p>
</blockquote>
<h3 id="jQuery的one次次事件绑定"><a href="#jQuery的one次次事件绑定" class="headerlink" title="jQuery的one次次事件绑定"></a>jQuery的one次次事件绑定</h3><p>有时候在DOM里面我们绑定事件的时候只希望这个事件只执行一次，这个时候就可以使用<code>one</code>来进行绑定。通过<code>one</code>绑定的事件只会触发一次</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(<span class="hljs-string">&quot;#btn1&quot;</span>).one(<span class="hljs-string">&quot;click&quot;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">evnet</span>)</span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">this</span>);<br>&#125;);<br></code></pre></td></tr></table></figure>

<p><strong>注意事项：one在进行事件委托的时候，要注意，它是只会在事件的绑定上面执行一次，如下代码所示</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;ul1&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第一项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;aaa&quot;</span>&gt;</span>第二项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第三项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;aaa&quot;</span>&gt;</span>第四项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第五项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">	$(<span class="hljs-string">&quot;.ul1&quot;</span>).one(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-string">&quot;.aaa&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;</span><br><span class="javascript">        <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">this</span>);</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>代码说明：在上面的代码当中，li里面的.aaa的元素一共才只会执行一次click事件</p>
</blockquote>
<h3 id="jQuery的off移除事件"><a href="#jQuery的off移除事件" class="headerlink" title="jQuery的off移除事件"></a>jQuery的off移除事件</h3><p>之前的<code>jQuery</code>里面的<code>on</code>相当于添加事件监听<code>addEventListener</code>，而现在的<code>off</code>相当于移除事件监听<code>removeEventListener</code></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn1&quot;</span>&gt;</span>按钮1<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/jquery-3.5.1.min.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    $(<span class="hljs-string">&quot;#btn1&quot;</span>).on(<span class="hljs-string">&quot;click&quot;</span>, aaa);</span><br><span class="javascript"></span><br><span class="javascript">    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">aaa</span>(<span class="hljs-params">event</span>) </span>&#123;</span><br><span class="javascript">        <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">this</span>)</span><br><span class="javascript">    &#125;</span><br><span class="javascript">	</span><br><span class="javascript">    <span class="hljs-comment">//这里相当于移除了事件监听</span></span><br><span class="javascript">    $(<span class="hljs-string">&quot;#btn1&quot;</span>).off(<span class="hljs-string">&quot;click&quot;</span>,aaa);</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h3 id="jQuery的on进行多事件绑定"><a href="#jQuery的on进行多事件绑定" class="headerlink" title="jQuery的on进行多事件绑定"></a>jQuery的on进行多事件绑定</h3><p>在这里我们将对一个元素绑定多个事件进行演示</p>
<p><strong>之前的代码</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;div1&quot;</span>&gt;</span><br>        这是一个盒子<br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/jquery-3.5.1.min.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-comment">// 鼠标按下，鼠标松开，鼠标移动</span></span><br><span class="javascript">    <span class="hljs-keyword">var</span> div1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;.div1&quot;</span>);</span><br><span class="javascript">    div1.addEventListener(<span class="hljs-string">&quot;mousedown&quot;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)</span>&#123;</span><br><span class="javascript">    &#125;);</span><br><span class="javascript">    div1.addEventListener(<span class="hljs-string">&quot;mouseup&quot;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)</span>&#123;</span><br><span class="javascript">    &#125;);</span><br><span class="javascript">    div1.addEventListener(<span class="hljs-string">&quot;mousemove&quot;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)</span>&#123;</span><br><span class="javascript">    &#125;);</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>通过on的方式进行多个事件绑定</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(<span class="hljs-string">&quot;.div1&quot;</span>).on(&#123;<br>    <span class="hljs-attr">mousedown</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;鼠标按下&quot;</span>);<br>    &#125;,<br>    <span class="hljs-attr">mouseup</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;鼠标松开&quot;</span>);<br>    &#125;,<br>    <span class="hljs-attr">mousemove</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;<br>        <span class="hljs-built_in">console</span>.log(event.clientX, event.clientY);<br>    &#125;<br>&#125;);<br></code></pre></td></tr></table></figure>

<p><strong>通过链式语法去完成</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(<span class="hljs-string">&quot;.div1&quot;</span>).on(<span class="hljs-string">&quot;mousedown&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;鼠标按下&quot;</span>);<br>&#125;).on(<span class="hljs-string">&quot;mouseup&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;鼠标松开&quot;</span>);<br>&#125;).on(<span class="hljs-string">&quot;mousemove&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(event.clientX, event.clientY);<br>&#125;)<br></code></pre></td></tr></table></figure>

<blockquote>
<p>在jQuery的on的事件绑定或one及事件方法里面，this永远指定事件的绑定者</p>
</blockquote>
<h3 id="属性方法"><a href="#属性方法" class="headerlink" title="属性方法"></a>属性方法</h3><p>jQuery的属性方法就是用于对DOM元素的属性进行操作的，如我们之前<code>DOM</code>当中的<code>value,innerText,innerHTML</code>等，这些都有封装好的方法</p>
<ol>
<li><p><code>html</code>方法</p>
<p>这个方法是对<code>innerHTML</code>进行取值或赋值，没有参数就是取值，有参数就是赋值</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> str = $(<span class="hljs-string">&quot;.div1&quot;</span>).html();					<span class="hljs-comment">//取值</span><br>$(<span class="hljs-string">&quot;.div1&quot;</span>).html(<span class="hljs-string">&quot;&lt;input type=&#x27;text&#x27;/&gt;&quot;</span>);		<span class="hljs-comment">//赋值</span><br></code></pre></td></tr></table></figure>
</li>
<li><p><code>text</code>方法</p>
<p>这个方法是对<code>innerText</code>进行取值或赋值，没有参数就是取值，有参数就是赋值</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> txt = $(<span class="hljs-string">&quot;.div1&quot;</span>).text();			<span class="hljs-comment">//取值		</span><br>$(<span class="hljs-string">&quot;.div1&quot;</span>).text(<span class="hljs-string">&quot;标哥哥真帅&quot;</span>);			 <span class="hljs-comment">//赋值</span><br></code></pre></td></tr></table></figure>
</li>
<li><p><code>val()</code>方法</p>
<p>对表单元素的<code>value</code>进行取值或赋值，没有参数就是取值，有参数就是赋值</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> userName = $(<span class="hljs-string">&quot;#userName&quot;</span>).val();			<span class="hljs-comment">//取值</span><br>$(<span class="hljs-string">&quot;#userName&quot;</span>).val(<span class="hljs-string">&quot;无敌帅气的标哥哥&quot;</span>);			   <span class="hljs-comment">//赋值</span><br></code></pre></td></tr></table></figure>
</li>
<li><p><code>attr()</code>方法</p>
<p>这个是获取<code>attribute</code>属性的，<code>attribute</code>属性是指HTML标签的属性</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(<span class="hljs-string">&quot;#userName&quot;</span>).attr(<span class="hljs-string">&quot;type&quot;</span>);						<span class="hljs-comment">//取值</span><br>$(<span class="hljs-string">&quot;#userName&quot;</span>).attr(<span class="hljs-string">&quot;type&quot;</span>,<span class="hljs-string">&quot;password&quot;</span>);				<span class="hljs-comment">//赋值</span><br>$(<span class="hljs-string">&quot;#userName&quot;</span>).attr(<span class="hljs-string">&quot;data-age&quot;</span>);					<span class="hljs-comment">//获取自定义属性值</span><br></code></pre></td></tr></table></figure>
</li>
<li><p><code>data()</code>方法</p>
<p>这个方法是用于获取 <code>data-</code>开头的自定义属性的</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;userName&quot;</span> <span class="hljs-attr">data-age</span>=<span class="hljs-string">&quot;18&quot;</span> <span class="hljs-attr">data-sex</span>=<span class="hljs-string">&quot;男&quot;</span> <span class="hljs-attr">data-user-name</span>=<span class="hljs-string">&quot;张三&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">	$(<span class="hljs-string">&quot;#userName&quot;</span>).data(<span class="hljs-string">&quot;age&quot;</span>);</span><br><span class="javascript">    $(<span class="hljs-string">&quot;#userName&quot;</span>).data(<span class="hljs-string">&quot;sex&quot;</span>);</span><br><span class="javascript">    $(<span class="hljs-string">&quot;#userName&quot;</span>).data(<span class="hljs-string">&quot;user-name&quot;</span>);</span><br><span class="javascript">    $(<span class="hljs-string">&quot;#userName&quot;</span>).data(<span class="hljs-string">&quot;userName&quot;</span>)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p><strong>注意</strong>：data这个方法是用于获取 <code>data-</code>开头的自定义属性的，但是它只是用于获取第一次的自定义值，后期值如果发生了变化，它没有变，这是一个天大的坑</p>
</blockquote>
</li>
<li><p><code>prop()</code>方法</p>
<p>这个方法是用于获取对象的<code>property</code> 属性的</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(<span class="hljs-string">&quot;#saveMe&quot;</span>).prop(<span class="hljs-string">&quot;clientWidth&quot;</span>);<br>$(<span class="hljs-string">&quot;#saveMe&quot;</span>).prop(<span class="hljs-string">&quot;checked&quot;</span>,<span class="hljs-literal">true</span>);<br></code></pre></td></tr></table></figure>
</li>
<li><p><code>removeAttr()</code>方法</p>
<p>相当于之前DOM里面的<code>removeAttribute()</code>方法，它是用于删除一个属性</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(<span class="hljs-string">&quot;#userName&quot;</span>).removeAttr(<span class="hljs-string">&quot;data-age&quot;</span>);<br></code></pre></td></tr></table></figure>

</li>
</ol>
<h3 id="尺寸方法"><a href="#尺寸方法" class="headerlink" title="尺寸方法"></a>尺寸方法</h3><p>在之前的DOM操作过程当中，我们讲过元素的大小，如<code>clientWidth/clientHeight</code>及<code>offsetWidth/offsetHeight</code>，这些在我们的jQuery里面都有方法直接调用</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">    <span class="hljs-selector-class">.div1</span> &#123;</span><br><span class="css">        <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;</span><br><span class="css">        <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;</span><br><span class="css">        <span class="hljs-attribute">border</span>: <span class="hljs-number">5px</span> solid black;</span><br><span class="css">        <span class="hljs-attribute">background-color</span>: deeppink;</span><br><span class="css">        <span class="hljs-attribute">padding</span>: <span class="hljs-number">10px</span>;</span><br><span class="css">    &#125;</span><br><span class="css"></span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;div1&quot;</span>&gt;</span><br>        这是一个盒子<br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/jquery-3.5.1.min.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">var</span> div1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;.div1&quot;</span>);</span><br><span class="javascript">    <span class="hljs-comment">// div1.clientWidth;   220</span></span><br><span class="javascript">    <span class="hljs-comment">// div1.offsetWidth;   230</span></span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><br></code></pre></td></tr></table></figure>

<ol>
<li><code>width()</code>指元素的内容content的大小</li>
<li><code>innerWidth()</code>指元素的<code>content+padding</code>的大小，相当于DOM的<code>clientWidth</code></li>
<li><code>outerWidth()</code>指元素的<code>content+padding+border</code>的大小，相当于DOM的<code>offsetWidth</code></li>
<li><code>outerWidth(true)</code>指元素的<code>content+padding+border+margin</code>的大小</li>
</ol>
<p><img src="https://pic.imgdb.cn/item/6151a6652ab3f51d9194d88a.gif" srcset="/blog/img/loading.gif" lazyload alt="jQuery元素大小"></p>
<h3 id="CSS方法"><a href="#CSS方法" class="headerlink" title="CSS方法"></a>CSS方法</h3><p>之前在DOM里面，我们讲过DOM操作样式有很多种方式，在jQuery里面也有如下的方法</p>
<ol>
<li><code>classList</code><ul>
<li><code>add()</code>添加样式</li>
<li><code>remove()</code>删除样式</li>
<li><code>toggle()</code>如果有就删除，没有就添加</li>
</ul>
</li>
<li><code>style</code>属性操作</li>
<li><code>window.getComputedStyle()</code>获取元素的样式</li>
</ol>
<p>在jQuery里面所对应相类似的方法如下</p>
<ol>
<li><p><code>addClass()</code>添加一个class样式</p>
</li>
<li><p><code>removeClass()</code>删除一个class样式</p>
</li>
<li><p><code>toggleClass()</code>如果有就删除，没有就添加</p>
</li>
<li><p><code>css()</code>直接在元素的<code>style</code>上面设置样式</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(<span class="hljs-string">&quot;.a&quot;</span>).css(<span class="hljs-string">&quot;border-radius&quot;</span>,<span class="hljs-string">&quot;50%&quot;</span>).css(<span class="hljs-string">&quot;border&quot;</span>,<span class="hljs-string">&quot;5px solid red&quot;</span>);<br> $(<span class="hljs-string">&quot;.a&quot;</span>).css(&#123;<br>     <span class="hljs-attr">border</span>: <span class="hljs-string">&quot;5px solid red&quot;</span>,<br>     <span class="hljs-string">&quot;border-radius&quot;</span>: <span class="hljs-string">&quot;50%&quot;</span>,<br>     <span class="hljs-attr">marginTop</span>: <span class="hljs-string">&quot;100px&quot;</span><br> &#125;)<br></code></pre></td></tr></table></figure>

<p>即可使用上面的链式语法去设置也可以使用下面的对象语法去设置</p>
</li>
<li><p><code>css()</code>直接通过<code>window.getComputedStyle</code>来获取元素样式</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(<span class="hljs-string">&quot;.a&quot;</span>).css(<span class="hljs-string">&quot;width&quot;</span>);<br>$(<span class="hljs-string">&quot;.a&quot;</span>).css(<span class="hljs-string">&quot;border-width&quot;</span>);<br>$(<span class="hljs-string">&quot;.a&quot;</span>).css(<span class="hljs-string">&quot;border-radius&quot;</span>);<br></code></pre></td></tr></table></figure>

</li>
</ol>
<h3 id="动画方法"><a href="#动画方法" class="headerlink" title="动画方法"></a>动画方法</h3><ol>
<li><p><code>show(speed)/hide(speed)/toggle(speed)</code>隐藏与显示</p>
<p>当我们在隐藏或显示元素的时候如果没有设置速度speed则就直接隐藏与显示，没有过渡的动画效果</p>
<p>如果我们设置的速度就会有过滤的效果。它的速度值有如下几个</p>
<ul>
<li><code>slow</code>慢速</li>
<li><code>normal</code>正常</li>
<li><code>fast</code>快速</li>
<li><code>miniseconds</code>毫秒</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(<span class="hljs-string">&quot;.box&quot;</span>).hide();		<span class="hljs-comment">//直接隐藏</span><br>$(<span class="hljs-string">&quot;.box&quot;</span>).show();		<span class="hljs-comment">//直接显示</span><br>$(<span class="hljs-string">&quot;.box&quot;</span>).hide(<span class="hljs-number">5000</span>);<br>$(<span class="hljs-string">&quot;.box&quot;</span>).show(<span class="hljs-string">&quot;fast&quot;</span>);<br></code></pre></td></tr></table></figure>
</li>
<li><p><code>slideUp(speed)/slideDown(speed)/slideToggle(speed)</code>上拉下滑</p>
<p>它也可以设置速度，它的速度设置与上面的设置是一样的，这个地方如果不设置速度就是<code>normal</code></p>
</li>
<li><p><code>fadeIn(speed)/fadeOut(speed)/fadeToggle(speed)/fadeTo()</code>渐隐渐现</p>
<p>上面的<code>fade</code>的效果是改变元素的透明度，直致元素隐藏或隐藏，其实<code>fadeTo</code>是改变元素到某一个透明度就停下来</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(<span class="hljs-string">&quot;.box&quot;</span>).fadeTo(<span class="hljs-number">1000</span>,<span class="hljs-number">0.3</span>);<br></code></pre></td></tr></table></figure>
</li>
<li><p>自定义动画方法<code>animate()</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(<span class="hljs-string">&quot;#btn1&quot;</span>).on(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;<br>    $(<span class="hljs-string">&quot;.box&quot;</span>).animate(&#123;<br>        <span class="hljs-string">&quot;border-radius&quot;</span>: <span class="hljs-string">&quot;50%&quot;</span>,<br>        <span class="hljs-string">&quot;margin-top&quot;</span>: <span class="hljs-string">&quot;200px&quot;</span><br>    &#125;, <span class="hljs-number">2000</span>);<br>&#125;);<br></code></pre></td></tr></table></figure>

</li>
</ol>
<h3 id="动画的回调函数"><a href="#动画的回调函数" class="headerlink" title="动画的回调函数"></a>动画的回调函数</h3><p>在jQuery里面所有的动画都是异步执行的</p>
<p>先看下面的代码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(<span class="hljs-string">&quot;#btn1&quot;</span>).on(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;<br>    $(<span class="hljs-string">&quot;.box&quot;</span>).slideToggle(<span class="hljs-number">5000</span>);            <span class="hljs-comment">//异步动画</span><br>    alert(<span class="hljs-string">&quot;hello world&quot;</span>);<br>&#125;);<br></code></pre></td></tr></table></figure>

<blockquote>
<p>因为动画的代码是异步执行的，所以我们的<code>alert()</code>代码没有等待上面的动画完成，直接执行了弹窗</p>
</blockquote>
<p><strong>如果我们希望代码是在动画执行完了以后再去操作则应该使用动画的回调函数</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(<span class="hljs-string">&quot;#btn1&quot;</span>).on(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;<br>    $(<span class="hljs-string">&quot;.box&quot;</span>).slideToggle(<span class="hljs-number">5000</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>&#123;<br>        alert(<span class="hljs-string">&quot;hello world&quot;</span>);<br>    &#125;);<br>&#125;);<br></code></pre></td></tr></table></figure>

<p> 所以的动画都有回调</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(ele).slideToggle(callBack);<br>$(ele).fadeToggle(callBack);<br>$(ele).animate(&#123;&#125;,time,callBack)<br></code></pre></td></tr></table></figure>

<h3 id="元素的追加方法"><a href="#元素的追加方法" class="headerlink" title="元素的追加方法"></a>元素的追加方法</h3><p>在之前的DOM操作里面，我们如果要追加元素，我们要使用<code>appendChild</code>，<code>insertAdjacentElement</code>等方法，现在在jQuery里面也有类似的方法</p>
<table>
<thead>
<tr>
<th>现在的jQuery方法</th>
<th>原来的DOM操作的位置</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td><code>append()</code></td>
<td><code>beforeEnd</code></td>
<td>结束之前</td>
</tr>
<tr>
<td><code>prepend</code></td>
<td><code>afterBegin</code></td>
<td>开始之后</td>
</tr>
<tr>
<td><code>before()</code></td>
<td><code>beforeBegin</code></td>
<td>开始之前</td>
</tr>
<tr>
<td><code>after()</code></td>
<td><code>afterEnd</code></td>
<td>结束之后</td>
</tr>
</tbody></table>
<blockquote>
<p>在之前的DOM操作里面，我们如果要追加元素，HTML标签，及text文本要分别使用不同的方法</p>
<ol>
<li><code>insertAdjacentHTML</code>追加标签</li>
<li><code>insertAdjacentElement</code>追加元素</li>
<li><code>insertAdjacentText</code>追加文本</li>
</ol>
<p>现在在jQuery里面，上面的四个方法可以实现通用，在追加的时候不用管它是元素还是HTML或是文本了</p>
</blockquote>
<h3 id="jQuery删除元素的方法"><a href="#jQuery删除元素的方法" class="headerlink" title="jQuery删除元素的方法"></a>jQuery删除元素的方法</h3><p>之前在原生JS操作DOM的时候，我们可以使用<code>remove()</code>删除元素，可以使用<code>removeChild()</code>来删除子元素。在jQuery里面，它也有相对应的方法</p>
<ol>
<li><code>empty()</code>清空选中的元素所有子元素</li>
<li><code>remove()</code>删除选中以后的元素</li>
</ol>
<hr>
<h3 id="Ajax方法"><a href="#Ajax方法" class="headerlink" title="Ajax方法"></a>Ajax方法</h3><p>在jQuery里面，它已经帮我们封装好了数据请求的方法Ajax，我们可以直接使用</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn1&quot;</span>&gt;</span>请求数据<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/jquery-3.5.1.min.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    $(<span class="hljs-string">&quot;#btn1&quot;</span>).on(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;</span><br><span class="javascript">        <span class="hljs-keyword">var</span> foodDetailUrl = <span class="hljs-string">&quot;http://106.12.109.115:8080/myxj/food?method=foodDetails&amp;fid=11&quot;</span>;</span><br><span class="javascript">        $.ajax(&#123;</span><br><span class="javascript">            <span class="hljs-attr">method</span>: <span class="hljs-string">&quot;GET&quot;</span>,</span><br><span class="javascript">            <span class="hljs-attr">url</span>: foodDetailUrl,</span><br><span class="javascript">            <span class="hljs-attr">dataType</span>:<span class="hljs-string">&quot;json&quot;</span>,        <span class="hljs-comment">//相当于我们之前封装的一个属性responseType</span></span><br><span class="javascript">            <span class="hljs-attr">success</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">result</span>) </span>&#123;</span><br><span class="javascript">                <span class="hljs-built_in">console</span>.log(result);</span><br><span class="javascript">            &#125;,</span><br><span class="javascript">            <span class="hljs-attr">error</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) </span>&#123;</span><br><span class="javascript">                <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;请求失败了&quot;</span>, error);</span><br><span class="javascript">            &#125;,</span><br><span class="javascript">            <span class="hljs-attr">complete</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">xhr</span>) </span>&#123;</span><br><span class="javascript">                <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;请求结束&quot;</span>);</span><br><span class="javascript">                <span class="hljs-comment">//无论是上面的请求成功还是请求失败，最都会进入到这里的结束方法</span></span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;);</span><br><span class="javascript">    &#125;);</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>上面是jQuery的ajax最基本的使用方法，现在我们再来细化一下使用方法</p>
<p><img src="https://pic.imgdb.cn/item/615301e32ab3f51d910b0344.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210928103731212"></p>
<hr>
<p>jQuery也知道，目前情况下，我们HTTP请求方式里面使用得最多的就是两种请求，一种是<code>get</code>请求，另一种是<code>post</code>请求。jQuery对这两种请求也做了单独的封装过程</p>
<p><strong>get请求</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(<span class="hljs-string">&quot;#btn1&quot;</span>).on(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;<br>    <span class="hljs-keyword">var</span> foodDetailUrl = <span class="hljs-string">&quot;http://106.12.109.115:8080/myxj/food?method=foodDetails&amp;fid=11&quot;</span>;<br>    $.get(foodDetailUrl, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">result</span>) </span>&#123;<br>        <span class="hljs-built_in">console</span>.log(result);<br>    &#125;);<br>&#125;);<br></code></pre></td></tr></table></figure>

<p><strong>get请求，将请求参数单独放在了一个对象里面</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(<span class="hljs-string">&quot;#btn1&quot;</span>).on(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;<br>    <span class="hljs-keyword">var</span> foodDetailUrl = <span class="hljs-string">&quot;http://106.12.109.115:8080/myxj/food&quot;</span>;<br>    $.get(foodDetailUrl, &#123;<br>        <span class="hljs-attr">method</span>: <span class="hljs-string">&quot;foodDetails&quot;</span>,<br>        <span class="hljs-attr">fid</span>: <span class="hljs-number">11</span><br>    &#125;, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">result</span>) </span>&#123;<br>        <span class="hljs-built_in">console</span>.log(result);<br>    &#125;)<br>&#125;);<br></code></pre></td></tr></table></figure>

<p><strong>post请求:待讲</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$.post(url,数据,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">result</span>)</span>&#123;<br>    <br>&#125;)<br></code></pre></td></tr></table></figure>

<h3 id="其它方法"><a href="#其它方法" class="headerlink" title="其它方法"></a>其它方法</h3><ol>
<li><p><code>each</code>遍历方法</p>
<p>之前的数组里面是有<code>forEach</code>方法，但是类数组是没有的，如果我们要对类数组进行forEach遍历就需要将这个类数组转换成数组再去遍历 ，这样很麻烦</p>
<p>jQuery直接提供了一个像这样的方法<code>each</code>方法你们遍历</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr = [<span class="hljs-string">&quot;a&quot;</span>, <span class="hljs-string">&quot;b&quot;</span>, <span class="hljs-string">&quot;c&quot;</span>, <span class="hljs-string">&quot;d&quot;</span>, <span class="hljs-string">&quot;e&quot;</span>];<br>$.each(arr, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">index, item</span>) </span>&#123;<br>    <span class="hljs-comment">//item代表当前元素</span><br>    <span class="hljs-built_in">console</span>.log(index,item);<br>&#125;);<br></code></pre></td></tr></table></figure>

<p><strong>下面的方式也可以</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr = [<span class="hljs-string">&quot;a&quot;</span>, <span class="hljs-string">&quot;b&quot;</span>, <span class="hljs-string">&quot;c&quot;</span>, <span class="hljs-string">&quot;d&quot;</span>, <span class="hljs-string">&quot;e&quot;</span>];<br>$(arr).each(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">index, item</span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(index, item);<br>&#125;)<br></code></pre></td></tr></table></figure>

<blockquote>
<p>一般情况下，我们会使用这一种方式来进行。</p>
<p>这个时候直接使用jQuery的选择器选中了arr数组，然后调用jQuery的<code>each</code>方法就可以了</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;ul1&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>张三<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>李四<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>王五<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>赵六<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>田七<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>周八<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn1&quot;</span>&gt;</span>按钮1<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/jquery-3.5.1.min.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    $(<span class="hljs-string">&quot;#btn1&quot;</span>).on(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;</span><br><span class="javascript">        $(<span class="hljs-string">&quot;.ul1&gt;li&quot;</span>).each(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">index, item</span>) </span>&#123;</span><br><span class="javascript">            <span class="hljs-comment">//item代表当前的DOM元素</span></span><br><span class="javascript">            <span class="hljs-built_in">console</span>.log($(item).text());</span><br><span class="javascript">        &#125;)</span><br><span class="javascript">    &#125;);</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>
</li>
<li><p><code>map</code>遍历方法</p>
<p>这个方法与之前数组里面的<code>map</code>方法非常想似，它可以接收回调函数的返回值，形成一个新的数组</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;ul1&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>张三<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>李四<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>王五<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>赵六<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>田七<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>周八<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn1&quot;</span>&gt;</span>按钮1<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/jquery-3.5.1.min.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    $(<span class="hljs-string">&quot;#btn1&quot;</span>).on(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;</span><br><span class="javascript">        <span class="hljs-keyword">var</span> result = $(<span class="hljs-string">&quot;.ul1&gt;li&quot;</span>).map(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">index, item</span>) </span>&#123;</span><br><span class="javascript">            <span class="hljs-keyword">return</span> $(item).text();</span><br><span class="javascript">        &#125;);</span><br><span class="javascript">        <span class="hljs-built_in">console</span>.log(result);</span><br><span class="javascript">    &#125;);</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>最终的结果如下</p>
</blockquote>
<p><img src="https://pic.imgdb.cn/item/6153026f2ab3f51d910bc76b.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210928110205075"></p>
</li>
<li><p><code>toArray()</code>方法</p>
<p>这个方法非常神奇，它可以将我们的类数组转换成数组</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr = $(<span class="hljs-string">&quot;.ul1&gt;li&quot;</span>).toArray();		<span class="hljs-comment">//选中元素，然后转成数组</span><br></code></pre></td></tr></table></figure>
</li>
<li><p><code>makeArray()</code>方法</p>
<p>这个方法与上面的方法保持一致，它可以将类数组转换成数组</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> eles = $(<span class="hljs-string">&quot;.ul1&gt;li&quot;</span>); <span class="hljs-comment">//类数组</span><br><span class="hljs-keyword">var</span> arr = $.makeArray(eles);<br><span class="hljs-built_in">console</span>.log(arr);<br></code></pre></td></tr></table></figure>

</li>
</ol>
<hr>
<h2 id="6-文档就绪函数"><a href="#6-文档就绪函数" class="headerlink" title="6. 文档就绪函数"></a>6. 文档就绪函数</h2><p>现在的jQeury框架也好，之前的原生JS操作DOM也好，都需要在整个网页加载完成以后再进行操作，如下所示</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;zh&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>以前的时候<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">        <span class="hljs-built_in">window</span>.onload = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>&#123;</span><br><span class="javascript">            <span class="hljs-keyword">var</span> img1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#img1&quot;</span>);</span><br><span class="javascript">            <span class="hljs-built_in">console</span>.log(img1);</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;img1&quot;</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://sghimages.shobserver.com/img/catch/2021/09/27/10ef51ba-5640-48bc-8fd1-7071598f296b.jpg&quot;</span></span><br><span class="hljs-tag">        <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>在上面的代码当中我们一般情况下是需要把JS代码写在body标签的后面，这样做是为了方便我们整个网页加载完成以后再进行JS的DOM操作，但是如果某情况下面我们需要将JS代码写在head里面，怎么办呢</p>
<p>这个时候我们就要使用<code>onload</code>事件，这个事件是整个网页加载完成以后处触发的事件。</p>
<p><span style="color:red;font-weight:bold">缺点：这个事件是必须等到所有的东西加载完成以后的，如页面上面有一些图片，那么onload也必须等到这个图片加载完成才会触发</span>。但是正常的DOM操作是不需要等待这些图片加载完成的，只要页面渲染完成就可以开始DOM操作</p>
<p>这个时候我们一般不会使用<code>window.onload</code>事件，转而使用另一个事件</p>
<p><img src="https://pic.imgdb.cn/item/6153b2af2ab3f51d91b8b7d3.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210928113128141"></p>
<p><img src="https://pic.imgdb.cn/item/6153b2ca2ab3f51d91b8ce72.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210928113330245"></p>
<p>所以JQuery也是一样的，它也是一个DOM操作的框架，它如果要操作DOM也必须等待到整个页面加载完成。这个时候jQuery专门写了一个方法用于处理<code>DOMContentLoaded</code>事件</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(<span class="hljs-built_in">document</span>).ready(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;网页文档加载好了&quot;</span>);<br>    <span class="hljs-keyword">var</span> img1 = $(<span class="hljs-string">&quot;#img1&quot;</span>);<br>    <span class="hljs-built_in">console</span>.log(img1);<br>&#125;);<br></code></pre></td></tr></table></figure>

<p>jQuery只要涉及到DOM所有操作都应该写在文档就绪函数里面，文档就绪函数还可以简写，如下</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"> <span class="hljs-comment">//文档就绪函数的简写</span><br>$(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>&#123;<br>    <br>&#125;);<br></code></pre></td></tr></table></figure>

<hr>
<h2 id="7-jQuery对象与普通DOM对象的转换"><a href="#7-jQuery对象与普通DOM对象的转换" class="headerlink" title="7. jQuery对象与普通DOM对象的转换"></a>7. jQuery对象与普通DOM对象的转换</h2><h3 id="jQuery对象转普通DOM对象"><a href="#jQuery对象转普通DOM对象" class="headerlink" title="jQuery对象转普通DOM对象"></a>jQuery对象转普通DOM对象</h3><p>我们通过 <code>$(选择器)</code>是可以选中页面的元素，这个时候它返回的是包含这个元素的一个类数组对象，如下所示</p>
<p><img src="https://pic.imgdb.cn/item/6153b31a2ab3f51d91b90fb9.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210928114507933"></p>
<p>这个对象不能把它当成DOM操作，如果想得到真实的DOM，可以通过索引拿到值</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> btn1 = $(<span class="hljs-string">&quot;#btn1&quot;</span>)[<span class="hljs-number">0</span>];<br><span class="hljs-comment">//通过索引0得到的了 jQuery的类数组当中的第0个元素，也就是这个真实的DOM元素</span><br><span class="hljs-keyword">var</span> btn1 = $(<span class="hljs-string">&quot;#btn1&quot;</span>).get(<span class="hljs-number">0</span>);<br></code></pre></td></tr></table></figure>

<h3 id="普通DOM对象转换为jQuery的对象"><a href="#普通DOM对象转换为jQuery的对象" class="headerlink" title="普通DOM对象转换为jQuery的对象"></a>普通DOM对象转换为jQuery的对象</h3><p>当一个普通的DOM对象转换为jQuery的对象以后，它就可以使用jQuery的方法</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> btn1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#btn1&quot;</span>);<br>$(btn1);			<span class="hljs-comment">//通过jQuery的选择器选取即可</span><br><br><span class="hljs-comment">//以下情影是经常出现的</span><br>$(<span class="hljs-built_in">this</span>);<br><br>$(<span class="hljs-string">&quot;.ul1&gt;li&quot;</span>).each(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">index,item</span>)</span>&#123;<br>    <span class="hljs-comment">//item代表当前的DOM对象,然后通过jQuery选中它变成一个jQuery对象</span><br>    $(item).text();<br>&#125;)<br></code></pre></td></tr></table></figure>

<hr>
<h2 id="8-jQuery事件对象"><a href="#8-jQuery事件对象" class="headerlink" title="8. jQuery事件对象"></a>8. jQuery事件对象</h2><p>之前就就已经讲过 jQuery主要的操作集中在4点</p>
<ol>
<li>优化了DOM的操作</li>
<li>便捷的事件处理</li>
<li>动画设计交互</li>
<li>Ajax数据交互</li>
</ol>
<p>在以前使用原生的JS进行0级事件及2级事件绑定的时候，我们都已经学会了，现在jQuery是通过<code>on</code>的方式来进行事件绑定</p>
<h3 id="jQuery的事件是2级DOM事件绑定"><a href="#jQuery的事件是2级DOM事件绑定" class="headerlink" title="jQuery的事件是2级DOM事件绑定"></a>jQuery的事件是2级DOM事件绑定</h3><p>它是一个2级事件的绑定，所以它应该具备2级事件的特点，可以多次绑定形成事件链</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>&#123;<br>    $(<span class="hljs-string">&quot;#btn1&quot;</span>).on(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;第一次&quot;</span>);<br>    &#125;)<br><br>    $(<span class="hljs-string">&quot;#btn1&quot;</span>).on(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;第二次&quot;</span>);<br>    &#125;)<br>&#125;);<br></code></pre></td></tr></table></figure>

<blockquote>
<p>在我个测试上面的代码的时候，我们发现两次都打印了，这就说明<code>btn1</code>的事件绑定了2次，这就充分说明它是2级事件的绑定</p>
</blockquote>
<p><img src="https://pic.imgdb.cn/item/615443192ab3f51d9154adba.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210928135119285"></p>
<h3 id="jQuery事件对象的获取"><a href="#jQuery事件对象的获取" class="headerlink" title="jQuery事件对象的获取"></a>jQuery事件对象的获取</h3><p>之前在原生的DOM操作里面， 我们如果要获取事件对象，应该使用下面的方式操作</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn1&quot;</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&quot;a(event)&quot;</span>&gt;</span>按钮1<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn2&quot;</span>&gt;</span>按钮2<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn3&quot;</span>&gt;</span>按钮3<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">a</span>(<span class="hljs-params">event</span>) </span>&#123;</span><br><span class="javascript">        <span class="hljs-comment">// 这个event就是事件对象</span></span><br><span class="javascript">        <span class="hljs-built_in">console</span>.log(event);</span><br><span class="javascript">    &#125;</span><br><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">var</span> btn2 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#btn2&quot;</span>);</span><br><span class="javascript">    btn2.onclick = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;</span><br><span class="javascript">        <span class="hljs-comment">// 这个时候的参数event是自动注入的，但是它有兼容性，需要做如下处理</span></span><br><span class="javascript">        event = event || <span class="hljs-built_in">window</span>.event;</span><br><span class="javascript">        <span class="hljs-built_in">console</span>.log(event);</span><br><span class="javascript">    &#125;</span><br><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">var</span> btn3 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#btn3&quot;</span>);</span><br><span class="javascript">    btn3.addEventListener(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;</span><br><span class="javascript">        <span class="hljs-comment">// 这个时候的参数event是自动注入的，但是它有兼容性，需要做如下处理</span></span><br><span class="javascript">        event = event || <span class="hljs-built_in">window</span>.event;</span><br><span class="javascript">        <span class="hljs-built_in">console</span>.log(event);</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>在之前的原生DOM操作里面，我们如果要获取事件对象，一定是通过兼容处理的，便是在jQuery则不需要了，jQuery把事件的兼容性已经处理好了</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn1&quot;</span>&gt;</span>按钮1<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/jquery-3.5.1.min.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    $(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>&#123;</span><br><span class="javascript">        $(<span class="hljs-string">&quot;#btn1&quot;</span>).on(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;</span><br><span class="javascript">            <span class="hljs-comment">// 这里不用处理兼容性了</span></span><br><span class="javascript">            <span class="hljs-built_in">console</span>.log(event);</span><br><span class="javascript">        &#125;)</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h3 id="分析jQuery的事件对象"><a href="#分析jQuery的事件对象" class="headerlink" title="分析jQuery的事件对象"></a>分析jQuery的事件对象</h3><p>jQuery的事件对象与原生的事件对象并不是一个东西，它的事件对象是一个自己封装以后的事件对象</p>
<table>
<thead>
<tr>
<th>原生的事件对象</th>
<th>jQuery事件对象</th>
</tr>
</thead>
<tbody><tr>
<td><img src="https://pic.imgdb.cn/item/6154434a2ab3f51d9154dc91.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210928140508428"></td>
<td><img src="https://pic.imgdb.cn/item/6154435d2ab3f51d9154ee59.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210928140531637"></td>
</tr>
</tbody></table>
<p>经过上面的对比，我们可以看到大多数的东西都差不多，但是仍然有一些区别</p>
<ol>
<li><p>jQuery的事件对象多了一个jQuery开头的属性，后面的属性值为true,这个属性用于标明我是一个jQuery的事件对象，不是原生的事件对象</p>
</li>
<li><p>处理了之前鼠标按键的兼容性<code>which</code>，1代表鼠标的左键，2代表鼠标中键，3代表鼠标右键</p>
</li>
<li><p>在原生的事件对象里面，如果要阻止事件的传播于为，我们要设置两次，如下</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript">event.cancelBubble = <span class="hljs-literal">true</span>;<br>event.stopPropagation();<br></code></pre></td></tr></table></figure>

<p>而在jQuery里面，它已经帮我们做了处理，所以只用一次就可以了</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript">event.stopPropagation();<br></code></pre></td></tr></table></figure>
</li>
<li><p>在原生的事件对象里面，我们针对炒同的事件级别，要阻止事件的默认行为，所以使用的方式是不一样的，0级使用的是<code>return false</code>，2级使用的是<code>event.preventDefault()</code>，而在jQuery里面，两者均可</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;a1&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;https://www.baidu.com&quot;</span>&gt;</span>百度一下<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;a2&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;https://www.baidu.com&quot;</span>&gt;</span>百度一下<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;a3&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;https://www.baidu.com&quot;</span>&gt;</span>百度一下<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/jquery-3.5.1.min.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    $(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>&#123;</span><br><span class="javascript">        <span class="hljs-keyword">var</span> a1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#a1&quot;</span>);</span><br><span class="javascript">        a1.onclick = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;</span><br><span class="javascript">            alert(<span class="hljs-string">&quot;我是a1&quot;</span>);</span><br><span class="javascript">            <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>; <span class="hljs-comment">//事件先于响应</span></span><br><span class="javascript">        &#125;</span><br><span class="javascript"></span><br><span class="javascript">        <span class="hljs-keyword">var</span> a2 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#a2&quot;</span>);</span><br><span class="javascript">        a2.addEventListener(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;</span><br><span class="javascript">            event = event || <span class="hljs-built_in">window</span>.event;</span><br><span class="javascript">            alert(<span class="hljs-string">&quot;我是a2&quot;</span>);</span><br><span class="javascript">            event.preventDefault(); <span class="hljs-comment">//阻止事件的默认行为</span></span><br><span class="javascript">        &#125;);</span><br><span class="javascript"></span><br><span class="javascript"></span><br><span class="javascript">        $(<span class="hljs-string">&quot;#a3&quot;</span>).on(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;</span><br><span class="javascript">            alert(<span class="hljs-string">&quot;我是a3&quot;</span>);</span><br><span class="javascript">            <span class="hljs-comment">// event.preventDefault();      //可以阻止事件默认行为</span></span><br><span class="javascript">            <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;                   <span class="hljs-comment">//也可以阻止事件默认行为</span></span><br><span class="javascript">        &#125;)</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><span style="color:red;font-weight:bold">注意事项：在上面的代码当中我们使用了<code>return false</code>来完成功能，这里我不建议大家这么做，除非你明确的知道你要干什么</span></p>
<p><code>return false</code>在jQuery的方法里面它主要干了两件事件</p>
<ol>
<li>阻止事件的传播行为</li>
<li>阻止事件了默认行为</li>
</ol>
</li>
<li><p>jQuery是一个单独封装好的对象，它已经帮我们处理了兼容性，如果我们还是希望得到原生的对象则可以通过<code>originalEvent</code>来找到原始事件</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>&#123;<br>    $(<span class="hljs-string">&quot;#btn1&quot;</span>).on(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;<br>        <span class="hljs-comment">//原生事件对象</span><br>        <span class="hljs-built_in">console</span>.log(event.originalEvent);<br>    &#125;)<br>&#125;)<br></code></pre></td></tr></table></figure>

</li>
</ol>
<hr>
<h3 id="jQuery的事件委托"><a href="#jQuery的事件委托" class="headerlink" title="jQuery的事件委托"></a>jQuery的事件委托</h3><p>之前我们已经在原生的DOM里面看过事件委托，并且得到了两个概念</p>
<ol>
<li>event.currentTarget代表事件绑定者</li>
<li>event.target代表事件触发者</li>
</ol>
<p>通过判断事件的触发者来实现事件的委托，但是这么做有一个小小的缺点</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;small-box&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn1&quot;</span>&gt;</span>按钮1<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">var</span> box = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;.box&quot;</span>);</span><br><span class="javascript">    box.addEventListener(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;</span><br><span class="javascript">        <span class="hljs-keyword">if</span> (event.target.matches(<span class="hljs-string">&quot;.small-box&quot;</span>)) &#123;</span><br><span class="javascript">            <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;我是事件，我触发了&quot;</span>, event);</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/615443cd2ab3f51d915552f4.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210928145227549"></p>
<p>我们发现只有点击红色的盒子才会触发事件，而点击红色盒子内部的元素不会触发，这是有bug的，</p>
<p><strong>我们现在来手动的解决这个bug</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> box = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;.box&quot;</span>);<br>box.addEventListener(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;<br>    event = event || <span class="hljs-built_in">window</span>.event;<br>    <span class="hljs-keyword">var</span> flag = <span class="hljs-literal">false</span>; <span class="hljs-comment">//认为它没有触发</span><br>    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i &lt; event.path.length; i++) &#123;<br>        <span class="hljs-keyword">var</span> ele = event.path[i];<br>        <span class="hljs-keyword">if</span> ((ele <span class="hljs-keyword">instanceof</span> HTMLElement) &amp;&amp; ele.matches(<span class="hljs-string">&quot;.small-box&quot;</span>)) &#123;<br>            flag = <span class="hljs-literal">true</span>;<br>            <span class="hljs-keyword">break</span>;<br>        &#125;<br>    &#125;<br>    <span class="hljs-keyword">if</span> (flag) &#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;正常触发事件&quot;</span>, event);<br>    &#125;<br>&#125;)<br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/615443e82ab3f51d91556dcf.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210928151007140"></p>
<hr>
<p>这个Bug在jQuery里完美解决了</p>
<ol>
<li>event.delegateTarget事件委托者</li>
<li>event.currentTarget事件绑定者</li>
<li>event.target事件触发者</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>&#123;<br>    $(<span class="hljs-string">&quot;.box&quot;</span>).on(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-string">&quot;.small-box&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;<br>        <span class="hljs-built_in">console</span>.log(event);<br>    &#125;)<br>&#125;)<br></code></pre></td></tr></table></figure>

<blockquote>
<p>代码分析：</p>
<ol>
<li><code>.box</code>是jQuery事件的委托者</li>
<li><code>.small-box</code>是jQuery事件的绑定者</li>
<li><code>#btn1</code>是jQuery事件的触发者</li>
</ol>
</blockquote>

            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                  <div class="post-meta mr-3">
                    <i class="iconfont icon-category"></i>
                    
                      <a class="hover-with-bg" href="/blog/categories/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/">前端笔记</a>
                    
                  </div>
                
                
                  <div class="post-meta">
                    <i class="iconfont icon-tags"></i>
                    
                      <a class="hover-with-bg" href="/blog/tags/JavaScript/">JavaScript</a>
                    
                      <a class="hover-with-bg" href="/blog/tags/JQuery/">JQuery</a>
                    
                  </div>
                
              </div>
              
                <p class="note note-warning">
                  
                    本博客所有文章除特别声明外，均采用 <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！
                  
                </p>
              
              
                <div class="post-prevnext">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/blog/2021/10/16/ES6%E7%AC%94%E8%AE%B0/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">ES6笔记</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/blog/2021/09/29/JavaScript%E7%AC%94%E8%AE%B0-BOM/">
                        <span class="hidden-mobile">JavaScript笔记-BOM</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    

    
      <a id="scroll-top-button" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
  </main>

  <footer class="text-center mt-5 py-3">
  <div class="footer-content">
     <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a> 
  </div>
  

  

  
</footer>


  <!-- SCRIPTS -->
  
  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" ></script>
<script  src="/blog/js/events.js" ></script>
<script  src="/blog/js/plugins.js" ></script>

<!-- Plugins -->


  
    <script  src="/blog/js/img-lazyload.js" ></script>
  



  



  <script  src="https://cdn.jsdelivr.net/npm/tocbot@4.12.3/dist/tocbot.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4.3.1/anchor.min.js" ></script>



  <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js" ></script>



  <script  src="/blog/js/local-search.js" ></script>






  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12/lib/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var title = document.getElementById('subtitle').title;
      
      typing(title)
      
    })(window, document);
  </script>









  <script  src="https://cdn.jsdelivr.net/npm/mermaid@8.10.1/dist/mermaid.min.js" ></script>
  <script>
    if (window.mermaid) {
      mermaid.initialize({"theme":"default"});
    }
  </script>







<!-- 主题的启动项 保持在最底部 -->
<script  src="/blog/js/boot.js" ></script>


</body>
</html>
